<template>
  <div class="time-list">
    <head-nav :cname="titleName"></head-nav>
    <div class="sjlb">
      <data-list> </data-list>
      <div class="sjlb-r">
        <span class="sjlb-add" onselectstart="return false" @click="sjlbAdd"
          >添加</span
        >
      </div>
    </div>
    <el-table :data="timeList" border>
      <el-table-column prop="id" label="编号" width="100"> </el-table-column>
      <el-table-column prop="title" label="秒杀时段名称" width="180">
      </el-table-column>
      <el-table-column prop="stime" label="每日开始时间" width="180">
      </el-table-column>
      <el-table-column prop="stime" label="每日结束时间" width="180">
      </el-table-column>
      <el-table-column label="启用/禁用" width="100">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <el-switch v-model="scope.row.boolean" @change="changtTab(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a
            href="javascript:;"
            class="edit-content"
            @click="editTime(scope.row)"
            >编辑</a
          >
          <a href="javascript:;" @click="delTime(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加时间段模态框 -->
    <el-dialog
      title="添加活动"
      :visible.sync="addTime"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="addTimeFrom"
        :rules="addTimeRules"
        ref="addAdRef"
        label-width="100px"
        class="demo-ruleForm add-cs"
      >
        <el-form-item label="时间段名称" prop="name">
          <el-input class="ipt-btn" v-model="addTimeFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="选择事件范围">
          <el-row>
            <el-col class="col-m-r" :span="11">
              <el-time-select
                class="select-css"
                placeholder="起始时间"
                v-model="addTimeFrom.startTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30'
                }"
              >
              </el-time-select>
            </el-col>
            <el-col :span="11">
              <el-time-select
                class="select-css"
                placeholder="结束时间"
                v-model="addTimeFrom.endTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                  minTime: addTimeFrom.startTime
                }"
              >
              </el-time-select>
            </el-col>
          </el-row>
        </el-form-item>
        <label for="" class="pl"> 是否启用</label>
        <el-switch v-model="addTimeFrom.boolean"> </el-switch>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="color-cs" @click="addTime = false">取 消</el-button>
        <el-button
          class="color-cs"
          type="primary"
          @click="addTimeSub(addTimeFrom)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleName: '',
      timeList: [],
      addTime: false,
      addTimeFrom: {
        name: '',
        startTime: '',
        endTime: '',
        boolean: true
      },
      addTimeRules: {
        name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    addTimeSub(param) {
      console.log(param, 'params')
    },
    handleClose() {
      this.addTime = false
    },
    // 删除
    delTime(scp) {
      console.log(scp, '删除')
    },
    // 编辑
    editTime(scp) {
      console.log(scp, '编辑')
      this.addTime = true
    },
    async getTimeList() {
      const { data: res } = await this.$http.get('/getTimeList')
      console.log(res)
      if (res.status !== 200) {
        return this.$Toast('获取时间列表数据失败', 'error')
      }
      this.$Toast('获取时间列表数据成功', 'success')
      this.timeList = res.data
    },
    sjlbAdd() {
      console.log('添加时间段')
    }
  },
  created() {
    this.titleName = this.$route.query.name
    // console.log()
    this.getTimeList()
  }
}
</script>

<style lang="less" scope>
.select-css {
  width: 100% !important;
}
.col-m-r {
  margin-right: 25px;
}
.sjlb {
  position: relative;
  width: 1100px;
  margin: 0 auto;
  .sjlb-r {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.sjlb-add {
  display: inline-block;
  cursor: pointer;
  padding: 5px 20px;
  border: 1px solid rgba(228, 228, 228, 1);
  margin: 0 5px;
  background: #fff;
  margin-top: 10px;
}
.sjlb-add:hover {
  background: #f3f3f3;
}
</style>
